import React, {useContext, useState} from 'react';
import { message } from 'antd'
import './login.css'
import   { post }  from '../../utils/post'
import {RoleContext} from "../../App";

// 验证规则：
const REG_UNAME = /^[a-zA-Z\d]{5,16}$/
const REG_PWD=/(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*()_.]+)$)^[\w~!@#$%^&*()_.]{8,16}$/

function Login(props) {
    const [username, setUsername] = useState('')
    const [password, setPassword] = useState('')
    const [confirm,setConfirm] = useState('')
    const [userType, setUserType] = useState('')
    const [secret, setSecret] = useState('')
    const {role,setRole} = useContext(RoleContext)
    const addRight = () => {
        const container = document.getElementById('container')
        container.classList.add('penal-right-active')
    }
    const removeRight = () => {
        const container = document.getElementById('container');
        container.classList.remove('penal-right-active');
    }
    const matchString = (un,pw,...rest)=>{
        if (!REG_UNAME.test(username)) {
            console.log(REG_UNAME.test(username))
            message.info('用户名长度5到16位，只能出现数字、字母')
            return false;
        }
        if (!REG_PWD.test(password)) {
            message.info('密码长度为8到16位，应为字母、数字、特殊符号组合')
            return false;
        }
        if(rest.length>0){
            if (password !== rest[0]) {
                message.info('两次密码输入不一致!')
                return false;
            }
        }
        return true;
    }
    const handleSubmit = async (event) => {
        event.preventDefault()
        const canRegister =matchString(username,password,confirm)
        if(canRegister) {
            const res = await post(
                '/auth/register', {
                    username, password, userType, secret
                })
            if(res.data.code===0){
                message.success('注册成功')
            }
            else{
                message.error(res.data.errorMsg)
            }
        }
    }
    const handleLogin = async (event)=>{
        event.preventDefault()//必须阻止冒泡
        const canLogin=matchString(username,password);
        if(canLogin){
            const res = await post('/auth/login',{
                username,password
            })
            if(res.data.code===0){
                const {token,roles,nickname,avatar,username,userUid}=res.data.data
                localStorage.setItem('TOKEN',token);
                localStorage.setItem('USERDATA',JSON.stringify({nickname,avatar,username,userUid,roles}))
                setRole(roles[0]);
                message.info('登录成功!')
                props.history.push('/index')
            }
            else {
                message.error(res.data.errorMsg)
            }
        }
    }
        return (<div className='Wrapper'>
                <div className="container" id="container">
                    {/* <!-- 注册页面 --> */}
                    <div className="form-container sign-up-container">
                        <form onSubmit={handleSubmit}>
                            <h1 className='h1'>注 册</h1>
                            <input name="username" placeholder="用户名..." autoComplete="" value={username}
                                   onChange={event=>setUsername(event.target.value)}/>
                            <input name="password" type="password" placeholder="密码..." autoComplete="" value={password}
                                   onChange={event=>setPassword(event.target.value)}/>
                            <input name="confirm" type="password" placeholder="确认密码..." autoComplete="" value={confirm}
                                   onChange={event=>setConfirm(event.target.value)}/>
                            <div className={'sign-up-radio'}>
                            <div>
                                <input type="radio" name="userType" value="USER" onChange={event=>setUserType(event.target.value)} /> 普通用户
                            </div>
                            <div>
                                <input type="radio" name="userType" value="ADMIN" onChange={event=>setUserType(event.target.value)} /> 管理员
                            </div>
                            </div>
                            <input name="secret"  placeholder="管理员密钥" value={secret}
                                   onChange={event=>setSecret(event.target.value)}/>
                            <button type='submit'>注 册</button>
                        </form>
                    </div>

                    {/* <!-- 登录页面 --> */}
                    <div className="form-container sign-in-container">
                        <form onSubmit={handleLogin}>
                            <h1 className='h1'>登 入</h1>
                            <input name="username" placeholder="用户名..." value={username}
                                 autoComplete=""  onChange={event=>setUsername(event.target.value)}/>
                            <input name="password" type="password" placeholder="密码..." value={password}
                                autoComplete=""   onChange={event=>setPassword(event.target.value)}/>
                            <button type="submit" >登 入</button>
                        </form>
                    </div>
                    {/* <!-- 覆盖容器 --> */}
                    <div className="overlay-container">
                        <div className="overlay">
                            {/* <!-- 覆盖左边 --> */}
                            <div className="overlay-penal overlay-left-container">
                                <h1 className='h1'> 欢迎 回来👏</h1>
                                <p className='p'>
                                    朋友，这里永远是你生活中的第二个港湾😊😊
                                </p>
                                <button className="ghost" id="signIn" onClick={removeRight}>登 入</button>
                            </div>
                            {/* <!-- 覆盖右边 --> */}
                            <div className="overlay-penal overlay-right-container">
                                <h1 className='h1'>你好 朋友👋</h1>
                                <p className='p'>
                                    输入您的个人详细信息，与我们一起开摆
                                </p>
                                <button className="ghost" id="signUp" onClick={addRight}>注 册</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>)

}

export default Login;
